<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
    <ul>
        <my-li v-for="name in names" v-bind:name="name"></my-li>
    </ul>
</div>

<script type="text/javascript">
    /*自定义组件 传递参数进来(组件传值)*/
    Vue.component("my-li",{
       props: ['name'],
        template: "<li style='color: red'>{{name}}</li>"
    });
    var vm = new Vue({
        el: "#app",
        data: {
            names: ["苍老师","武则天","橘右京"]
        }
    });
</script>

</body>
</html>